<template>
  <div v-loading="loadingData" class="dashboard-container">
    <div class="app-container">
      <el-card style="background: #4AB7BD; color: white">
        <TreeTools :tree-data="companyInfo" :is-root="true" @addDept="addDept" />
      </el-card>
      <el-tree node-key="id" default-expand-all :data="departs" :props="defaultProps">
        <template v-slot="{data}">
          <TreeTools
            :tree-data="data"
            @addDept="addDept"
            @editDept="editDept"
            @getDepts="getDepts"
          />
        </template>
      </el-tree>
    </div>

    <add-dept
      ref="deptRef"
      :tree-node="node"
      :show-dialog.sync="showAddDeptDialog"
      @getDepts="getDepts"
    />
  </div>
</template>

<script>
import TreeTools from '@/views/departments/components/TreeTools'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import AddDept from '@/views/departments/components/add-dept'

/**
 * 如何构建一个树形结构？
 * 1、需要el-tree组件
 * 2、提供一个data属性
 *    data属性所对应的值是一个树形结构
 */
// 插槽：内容结构不固定的时候使用插槽
// 组件：内容固定，数据不固定的时候使用组件

// 把[所有]数组方法自己总结出文档
export default {
  name: 'Depart',
  components: {
    AddDept,
    TreeTools
  },
  data() {
    return {
      loadingData: false,
      // 保存当前点击的行数据(新增，编辑)
      node: {},
      showAddDeptDialog: false,
      companyInfo: { },
      defaultProps: {
        // children: 'children',
        label: 'name'
      },
      // 写死了一个数据
      // 模拟后端返回的数据结构，先进性界面渲染，获取真实数据，直接渲染
      departs: []
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    editDept(node) { // node数据里面是有当前点击的节点id数据的
      // 弹层标识变为true
      this.showAddDeptDialog = true
      // 记录了当前点击的节点信息
      this.node = node
      //  调用子组件获取详情数据的方法
      this.$refs.deptRef.getDepartDetail(node.id)
    },
    addDept(node) {
      this.showAddDeptDialog = true
      // 记录了点击新增时候的节点信息
      this.node = node
    },
    async getDepts() {
      try {
        this.loadingData = true
        const res = await getDepartments()
        this.companyInfo = {
          name: res.companyName,
          manager: res.companyManage || '负责人',
          id: ''
        }
        // 拿到部门数据之后，需要进行二次处理
        this.departs = tranListToTreeData(res.depts, '')
        this.loadingData = false
      } catch (e) {
        console.log(e)
        this.loadingData = false
      }
      // console.log(this.departs)
    }
  }
}
// const depts = [
//   {
//     name: '总裁办',
//     id: 1,
//     pid: ''
//   },
//   {
//     name: '财务部',
//     id: 2,
//     pid: '',
//     children: [
//       {
//         name: '财务核算部',
//         id: 21,
//         pid: 2
//       }
//     ]
//   },
//   {
//     name: '运营部',
//     id: 3,
//     pid: ''
//   },
//   {
//     name: '技术部',
//     id: 4,
//     pid: ''
//   }
// ]
</script>

<style scoped>
.app-container {
  width: 900px;
  margin: 20px auto;
}
</style>

